<template>
  <div class="main">
    <div class="card">
      <header>
        <img src=".././assets/header.jpg">
        <div class="txt">
          <p>嘉庭公寓预约</p>
          <span>尊敬的客户业主，您好！</span>
          <div></div>
          <p class="msg"> 首先感谢您接受我们的邀请。
            我们是泰达产发集团北塘建发公司客户服务团队，
            欢迎预定我们的公寓，真诚感谢您的配合！ </p>
        </div>
      </header>
      <div class="form">
        <el-form :model="form"
                 :rules="rules"
                 ref="form1"
                 label-width="30%"
                 class="demo-ruleForm">
          <!-- 表单开始 -->
          <el-form-item label="企业名称"
                        prop="qiyename">
            <el-input style="width:90%"
                      placeholder="请输入企业名称"
                      v-model="form.qiyename"></el-input>
          </el-form-item>
          <el-form-item label="注册地址"
                        prop="zhuce">
            <el-input style="width:90%"
                      placeholder="请输入注册地址"
                      v-model="form.zhuce"></el-input>
          </el-form-item>
          <el-form-item label="经营地址"
                        prop="jingying">
            <el-input style="width:90%"
                      placeholder="请输入经营地址"
                      v-model="form.jingying"></el-input>
          </el-form-item>
          <el-form-item label="需要房型"
                        prop="fangxing">
            <el-select v-model="form.fangxing"
                       style="width:90%"
                       placeholder="请选择产业类别">
              <el-option v-for="item in fangxingList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="入住性别"
                        prop="sex">
            <el-select v-model="form.sex"
                       style="width:90%"
                       placeholder="请选择入住性别">
              <el-option v-for="item in sexList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="男生房间数"
                        prop="fangjian1">
            <!-- <el-input style="width:90%"
                      placeholder="请输入房间数"
                      v-model="form.fangjian1"></el-input> -->
            <el-input-number style="width:90%"
                             v-model="form.fangjian1"
                             :min="0">
            </el-input-number>
          </el-form-item>
          <!-- <el-form-item label="入住性别"
                        prop="sex2">
            <el-select v-model="form.sex2"
                       style="width:90%"
                       placeholder="请选择入住性别">
              <el-option v-for="item in sexList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="女生房间数"
                        prop="fangjian2">
            <!-- <el-input style="width:90%"
                      placeholder="请输入房间数"
                      v-model="form.fangjian2"></el-input> -->
            <el-input-number style="width:90%"
                             v-model="form.fangjian2"
                             :min="0">
            </el-input-number>
          </el-form-item>
          <el-form-item label="入住人数"
                        prop="number">
            <el-input style="width:90%"
                      placeholder="请输入入住人数"
                      v-model="form.number"></el-input>
          </el-form-item>
          <el-form-item label="房间总数量"
                        prop="fangjianNumber">
            <el-input style="width:90%"
                      disabled
                      placeholder="请输入房间总数量"
                      v-model="countAll"></el-input>
          </el-form-item>
          <el-form-item label="租赁周期/月"
                        prop="zulinzhouqi">
            <el-radio-group style="margin-left:30px"
                            v-model="form.zulinzhouqi">
              <el-radio :label="3">3</el-radio>
              <el-radio :label="6">6</el-radio>
              <el-radio :label="12">12</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="付款意向/月"
                        prop="fukuan">
            <el-radio-group style="margin-left:30px"
                            v-model="form.fukuan">
              <el-radio :label="3">3</el-radio>
              <el-radio :label="6">6</el-radio>
              <el-radio :label="12">12</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系人"
                        prop="linkname">
            <el-input style="width:90%"
                      placeholder="请输入联系人"
                      v-model="form.linkname"></el-input>
          </el-form-item>
          <el-form-item label="联系电话"
                        prop="phone">
            <el-input style="width:90%"
                      placeholder="请输入联系电话"
                      v-model="form.phone"></el-input>
          </el-form-item>
          <!-- end -->
        </el-form>
        <!-- 提交 -->
        <div class="sub">
          <el-button @click="submit"
                     style="width:50%"
                     :loading="loading"
                     type="primary">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { addObj3 } from '@/api/faq1'

export default {
  data() {
    return {
      form: { peopleNumber: 0, scope: [], fangjian1: 0, fangjian2: 0 },
      labelPosition: 'top',
      loading: false,
      fangxingList: [
        { label: '单人间', value: '单人间' },
        { label: '双人间', value: '双人间' },
        { label: '一室一厅', value: '一室一厅' },
        { label: '两室一厅', value: '两室一厅' }
      ],
      sexList: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      rules: {
        qiyename: [{ required: true, message: '请输入', trigger: 'blur' }],
        zhuce: [{ required: true, message: '请输入', trigger: 'blur' }],
        jingying: [{ required: true, message: '请输入', trigger: 'blur' }],
        fangxing: [{ required: true, message: '请选择', trigger: 'blur' }],
        fangjian1: [{ required: true, message: '请输入', trigger: 'blur' }],
        fangjian2: [{ required: true, message: '请输入', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择', trigger: 'blur' }],
        number: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请输入数字' }
        ],
        // fangjianNumber: [
        //   { required: true, message: '请输入', trigger: 'blur' },
        //   { pattern: /^[0-9]*$/, message: '请输入数字' }
        // ],
        zulinzhouqi: [{ required: true, message: '请选择', trigger: 'blur' }],
        fukuan: [{ required: true, message: '请选择', trigger: 'blur' }],
        linkname: [{ required: true, message: '请输入', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请重新输入'
          }
        ]
      }
    }
  },
  computed: {
    countAll() {
      return this.form.fangjian1 + this.form.fangjian2
    }
  },
  methods: {
    handleChangeTime(data) {
      console.log('data===', data)
    },
    handleChangeBianli(data) {
      console.log('data===', data)
    },
    submit() {
      console.log('提交===', this.form)
      this.$refs.form1.validate(valid => {
        if (valid) {
          console.log('通过校验===')

          let sub = this.form
          let subData = {
            ID: '',
            Reservation_infor: '',
            Enterprise_name: sub.qiyename,
            Company_Registered_Address: sub.zhuce,
            Business_address: sub.jingying,
            Room_type_required: sub.fangxing,
            // Occupancy_gender: sub.sex,
            Number_male_rooms: sub.fangjian1,
            Number_female_rooms: sub.fangjian2,
            Occupancy: sub.number,
            Number_rooms: this.countAll,
            Lease_cycle: sub.zulinzhouqi,
            Payment_intention: sub.fukuan,
            contacts: sub.linkname,
            contact_number: sub.phone,
            createuser: 'admin',
            updateuser: 'admin',
            createdate: '',
            updatedate: ''
          }
          console.log('subData===', subData)
          this.loading = true
          addObj3(subData)
            .then(res => {
              console.log('res===', res)
              setTimeout(() => {
                this.loading = false
              }, 1000)
              this.$router.push({
                path: '/success',
                query: { type: 'faq3', code: res.data }
              })
            })
            .catch(err => {
              setTimeout(() => {
                this.loading = false
                this.$notify.error({
                  title: '错误',
                  message: '提交失败',
                  duration: 2000
                })
              }, 1000)
            })
        } else {
          console.log('error submit!!')
          setTimeout(() => {
            this.loading = false
          }, 1000)
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.main {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  /* border: 1px solid #0f0; */
}
header img {
  display: block;
  width: 100%;
}
.txt {
  padding: 10px;
}
.txt p {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
  /* text-indent: 10px; */
}
.txt span {
  font-size: 14px;
}
.txt .msg {
  font-size: 14px;
  line-height: 28px;
  text-indent: 10px;
}
.sub {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px 0;
  /* margin: 0 auto; */
}
</style>